<template>
  <div class="adminBox">
    <div
      class="leftMenuBox"
      :style="{width:this.isActive?'65px':'230px'}"
    >
      <left-menu :isActive="isActive"></left-menu>
    </div>
    <div class="rigViewBox">
      <div class="rigNavBox">
        <nav-bar :isActive="isActive" @switchActive="switchActive"></nav-bar>
      </div>
      <div class="rigViewBox">
        <router-view class="adminViewBox" />
      </div>
    </div>
  </div>
</template>

<script>
import LeftMenu from "./components/LeftMenu";
import NavBar from "./components/NavBar";

export default {
  components: {
    LeftMenu,
    NavBar
  },
  data() {
    return {
      bgColor: "#fff",
      isActive: false
    };
  },
  mounted() {
    let blogSet = JSON.parse(localStorage.getItem("blogSet"));
    if (blogSet) {
      this.$store.commit("setBlogColor", blogSet.blogColor);
      this.$store.commit("setBlogFontColor", blogSet.blogFontColor);
      this.$store.commit("setBlogBgImg", blogSet.blogBgImg);
      this.bgColor = blogSet.blogColor;
    }
  },
  methods: {
    switchActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>
<style lang="scss">
.adminBox {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  .rigViewBox {
    flex: 1;
    .rigNavBox {
      height: 50px;
    }
    .rigViewBox {
      height: calc(100vh - 50px);
      overflow: auto;
      .adminViewBox {
        padding: 20px;
      }
    }
  }
  .leftMenuBox {
    border-right: solid 1px #e6e6e6;
    background-color: #545c64;
    .el-menu {
      border: none !important;
    }
  }
}
</style>